<template>
    <div>
        <div id="info-bar" :style="{width: $store.state.availableWidth}" class="px-3">
            <div v-if="breadcrumbs.length === 0">
                <span class="float-left">{{selectInfo}}</span>
                <span class="float-right">已全部加载,共{{listLength}}个</span>
            </div>
            <div id="breadcrumb" v-else>
                <a @click="$router.push('/disk/all?path=/')">全部文件</a>
                <span v-for="(item, index) in breadcrumbs">
                    <span class="mx-2">></span>
                    <a
                            @click="$router.push(item.path)"
                            :class="{current: index === breadcrumbs.length - 1}"
                    >
                        {{item.name}}
                    </a>
                </span>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "MyBreadcrumb",
        created() {
            this.getBreadcrumbs();
        },
        props: {
            listLength: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                breadcrumbs: []
            }
        },
        methods: {
            getBreadcrumbs() {
                if (!this.path || this.path === '/') {
                    this.breadcrumbs = []
                } else {
                    let pathList = this.path.split("/");
                    pathList.shift();
                    // 获取breadcrumbs
                    let path = "/disk/all?path="
                    let breadcrumbs = []
                    for (const item of pathList) {
                        path += "/" + item
                        breadcrumbs.push({
                            name: item,
                            path: path
                        })
                    }
                    this.breadcrumbs = breadcrumbs;
                }
            }
        },
        computed: {
            selectInfo() {
                if (this.selected.length === 0) {
                    return "全部文件"
                } else {
                    return "已选择" + this.selected.length + "个文件/文件夹"
                }
            },
            selected: {
                get() {
                    return this.$store.state.selected;
                },
                set(value) {
                    this.$store.commit('setSelected', value)
                }
            },
            path() {
                return this.$route.query.path;
            }
        },
        watch: {
            path: function () {
                // 更新文件列表
                this.$emit("update-list")
                // 获取路径列表
                this.getBreadcrumbs();
            }
        }
    }
</script>

<style scoped>
    #info-bar {
        position: fixed;
        top: 125px;
        left: 195px;
        height: 20px;
        line-height: 20px;
        font-size: 15px;
        color: rgb(102, 102, 102);
    }

    .current {
        color: rgb(102, 102, 102);
    }
</style>